<template>
	<view class="container">
		<view
			class="container-box1"
			v-if="
				isfetch == 1 &&
				((orderState == '已预约' && type == 1) ||
					(orderState == '服务中' && type == 2) ||
					((orderState == '待取件' || orderState == '已预约') && type == 3))
			"
		>
			<view
				class="flex f-column f-align"
				v-if="type == 1"
				style="padding-bottom: 40rpx"
			>
				<view class="flex f-align">
					<image
						src="../static/img/white-dui.png"
						style="width: 80rpx; height: 80rpx"
					></image>
					<text class="white font36 ml30">支付成功</text>
					<text class="white font36 ml30"
						>￥{{ detailInfo.actualPayment }}</text
					>
				</view>
				<view class="look-btn f-center" @click="lookOrder('已预约', 0)"
					>查看订单</view
				>
			</view>
			<view class="flex f-column f-align detail-box">
				<view v-if="lijiyuyue == '1'">
					<view class="flex f-column f-align" v-if="type != 2">
						<text class="font36 gray333 bold">开箱码</text>
						<tki-qrcode
							class="mt40"
							:loadMake="true"
							:val="
								orderState == '已预约'
									? detailInfo.saveCode
									: detailInfo.takeOutCode
							"
							:size="370"
						></tki-qrcode>
						<view class="flex f-align font28 gray777 mt50">
							开箱码：<text class="font40 gray333">{{
								orderState == '已预约'
									? detailInfo.saveCode
									: detailInfo.takeOutCode
							}}</text>
						</view>
						<view class="font24 flex mt20 bold color-red">
							操作说明：<view style="width: 400rpx"
								>前往洗衣柜并在下方扫码区扫描开箱码，开箱存入后请关闭箱门</view
							>
						</view>
					</view>
					<view class="flex f-column f-align" v-else>
						<view class="flex f-align mt20">
							<image
								src="../static/img/blue-dui.png"
								style="width: 80rpx; height: 80rpx"
							></image>
							<text class="blue font36 ml30">支付成功</text>
							<text class="blue font36 ml30"
								>￥{{ detailInfo.actualPayment }}</text
							>
						</view>
						<image
							src="../static/img/kaimentu.png"
							style="width: 190rpx; height: 166rpx"
							class="mt20"
						></image>
						<text class="font28 gray333 mt20">{{ detailInfo.xmbh }}</text>
						<text class="font24 gray999 mt20"
							>箱门已打开，衣子存放后记得关闭箱门</text
						>
						<view class="flex f-align">
							<view class="look-btn1 f-center" @click="openAgain"
								>再次开门</view
							>
							<view class="look-btn1 f-center" @click="lookOrder('服务中', 1)"
								>查看订单</view
							>
						</view>
					</view>
				</view>
				<view v-else class="flex f-column f-align detail-box">
					待配送员上门取件
				</view>

				<image src="../static/img/order-bg.png" class="line-img"></image>
				<view class="flex f-column w100" style="padding: 0 54rpx">
					<view
						v-for="(item, index) in detailInfo.orderDetails"
						:key="index"
						class="flex f-align mt10 mb10"
						@click="toPageHandle(item.id)"
					>
						<image
							:src="item.goodsUrl"
							style="width: 150rpx; height: 150rpx; margin-right: 50rpx"
						></image>
						<view class="flex f-column">
							<text class="font36 gray333 bold mb10">{{ item.goodName }}</text>
							<view class="flex wrap">
								<view class="f-item mr20">清洗</view>
								<view
									class="f-item mr20"
									v-for="(a, b) in toArr(item.projectName)"
									:key="b"
									>{{ a }}</view
								>
							</view>
							<view v-if="item.flaw" class="font28 gray333">
								瑕疵：{{ item.flaw }}
							</view>
							<view v-if="item.remarks" class="font28 gray333">
								备注：{{ item.remarks }}
							</view>
						</view>
						<view class="flex f-align ml20" v-if="orderState == '待取件'">
							<text class="font28 gray333">{{ item.orderState }}</text>
							<text class="zlicon icon-right font28 gray333 ml10"></text>
						</view>
					</view>
				</view>
				<image src="../static/img/order-bg.png" class="line-img"></image>
				<text class="font36 gray333 bold"
					>实付金额：￥{{ detailInfo.actualPayment }}</text
				>
				<view class="flex f-column font24 gray333 mt30">
					<view>订单号：　{{ detailInfo.orderNumber }}</view>
					<view>下单时间：{{ detailInfo.transactionTime }}</view>
					<view class="flex">
						下单地址：
						<view style="width: 400rpx">{{ detailInfo.gzbhAddress }}</view>
					</view>
					<view>手机号：　{{ detailInfo.userPhone }}</view
					>　
				</view>
				<view class="flex f-justifyB f-align kefu-box">
					<button type="default" class="contact-btn" open-type="contact">
						在线客服
					</button>
					<text class="zlicon icon-right font26 gray666"></text>
				</view>
			</view>
		</view>
		<view
			class="flex f-column mb20"
			v-if="isfetch == 1 && orderState == '交易完成' && type == 3"
		>
			<view class="flex f-column com-top white">
				<text class="font32">交易完成</text>
				<text class="font24 mt10">您的服务订单已完成</text>
			</view>
			<view class="flex f-column com-bottom">
				<view class="flex f-align">
					<!-- <view class="circle-title">取</view> -->
					<image
						src="../static/img/shouyudibiao@2x.png"
						style="width: 50rpx; height: 50rpx"
					></image>
					<view class="flex f-column ml20 grow">
						<text class="font24 gray333">{{ detailInfo.gzbhAddress }}</text>
						<text class="font22 gray999 mt10"
							>{{ detailInfo.userName }} {{ detailInfo.userPhone }}</text
						>
					</view>
				</view>
			</view>
		</view>

		<view
			class="flex f-column service-box"
			v-if="
				isfetch == 1 &&
				(orderState == '服务中' || orderState == '交易完成') &&
				type == 3
			"
		>
			<view class="flex f-align f-justifyB blue-box">
				<view class="flex f-column font28 white">
					<text>订单编号：{{ detailInfo.orderNumber }}</text>
					<text class="mt10">时　　间：{{ detailInfo.transactionTime }}</text>
				</view>
				<text class="font32 white">数量X{{ detailInfo.goodsNumber }}</text>
			</view>
			<view class="blue-line"></view>
			<view class="fixed-box">
				<view
					class="flex f-align f-justifyB mt20"
					v-for="item in detailInfo.orderDetails"
					:key="item.id"
					@click="$api.toPage('./orderStep?id=' + item.id)"
				>
					<view class="flex f-align">
						<image
							:src="item.goodsUrl"
							style="width: 90rpx; height: 90rpx"
						></image>
						<view class="flex f-column ml20">
							<view class="font28 gray333">
								{{ item.goodName }}
							</view>
							<view v-if="item.flaw" class="font28 gray333">
								瑕疵：{{ item.flaw }}
							</view>
							<view v-if="item.remarks" class="font28 gray333">
								备注：{{ item.remarks }}
							</view>
						</view>
					</view>
					<view class="flex f-align">
						<text class="font28 gray333">{{ item.orderState }}</text>
						<text class="zlicon icon-right font28 gray333 ml10"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="f-center" v-if="isfetch == 2 || isfetch == 3">
			<text class="nohas-font">{{
				isfetch == 2 ? '查询不到订单' : '网络异常，请刷新后重试'
			}}</text>
		</view>
	</view>
</template>

<script>
import tkiQrcode from '../components/tki-qrcode/tki-qrcode.vue'
import { mapMutations } from 'vuex'
export default {
	data() {
		return {
			isfetch: '', //  1 表示成功 2 失败
			orderId: '',
			detailInfo: {},
			orderId: '',
			type: '', // 1 预约下单 2 扫描下单 3 订单列表
			orderState: '',
			lijiyuyue: ''
		}
	},
	components: {
		tkiQrcode
	},
	onLoad(option) {
		this.lijiyuyue = uni.getStorageSync('lijiyuyue')
		console.log(option)
		this.type = option.type
		this.orderState = option.orderState
		if (option.type == 1 || option.type == 2) {
			this.getUserInfo()
		}
		this.orderId = option.orderId
		this.getDetailInfo()
	},
	onReady() {
		uni.setNavigationBarTitle({
			title: this.orderState
		})
	},
	onPullDownRefresh() {
		if (this.type == 1 || this.type == 2) {
			this.getUserInfo()
		}
		this.getDetailInfo()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	methods: {
		toPageHandle(id) {
			if (this.orderState == '待取件') {
				this.$api.toPage('./orderStep?id=' + id)
			}
		},
		openAgain() {
			this.$http
				.ajax({
					url: '/Order/open',
					params: {
						orderNumber: this.detailInfo.orderNumber
					}
				})
				.then((res) => {
					if (res.code == 200) {
						this.$api.msg('开门成功')
					} else {
						this.$api.msg(res.msg)
					}
				})
		},
		lookOrder(orderState, tabs) {
			uni.reLaunch({
				url: './orderList?orderState=' + orderState + '&tabs=' + tabs
			})
		},
		...mapMutations(['login']),
		getUserInfo() {
			this.$http
				.ajax({
					url: '/User/wxSelect',
					params: {
						openId: uni.getStorageSync('openId')
					}
				})
				.then((res) => {
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data[0])
						this.login(res.data[0])
					}
				})
		},
		getDetailInfo() {
			uni.showLoading({
				title: '请求中...',
				mask: true
			})
			this.$http
				.ajax({
					url: '/Order/list',
					params: {
						id: this.orderId
					}
				})
				.then((res) => {
					uni.hideLoading()
					if (res.code == 0 && res.data.length > 0) {
						this.isfetch = 1
						this.detailInfo = res.data[0]
					} else {
						this.isfetch = 2
					}
				})
				.catch(() => {
					uni.hideLoading()
					this.isfetch = 3
				})
		},
		toArr(str) {
			if (!str) {
				return []
			} else {
				return str.split(',')
			}
		}
	}
}
</script>

<style scoped lang="scss">
.use-status {
	width: 710rpx;
	padding: 30rpx 0;
	background: #ffffff;
	border-radius: 20rpx;

	image {
		width: 84rpx;
		height: 84rpx;
	}
}

.color-red {
	color: red;
}

.use-box {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 0 40rpx 40rpx;

	.box-item {
		padding: 40rpx 0 35rpx;
		border-bottom: 2rpx solid #cccccc;
	}

	.btn {
		width: 630rpx;
		height: 72rpx;
		background: #ffffff;
		border: 2rpx solid #cccccc;
		border-radius: 6rpx;
	}
}

.use-btn {
	width: 710rpx;
	height: 100rpx;
	background: #3063d9;
	border-radius: 20rpx;
}

.again-btn {
	width: 710rpx;
	height: 100rpx;
	border: 2rpx solid #cccccc;
	margin-top: 20rpx;
	border-radius: 20rpx;
}

.container {
	padding: 0;
	height: 100%;

	.com-top {
		width: 750rpx;
		background: #4082fd;
		padding: 20rpx 32rpx;
	}

	.com-bottom {
		padding: 28rpx 32rpx;
		background-color: #ffffff;

		.circle-title {
			width: 52rpx;
			height: 52rpx;
			border: 2rpx solid #4082fd;
			border-radius: 50%;
			font-size: 28rpx;
			line-height: 48rpx;
			color: #4082fd;
			text-align: center;
		}
	}

	.service-box {
		padding: 30rpx 32rpx;
		background-color: #ffffff;
		position: relative;

		.fixed-box {
			position: absolute;
			left: 52rpx;
			top: 210rpx;
			z-index: 99;
			background: linear-gradient(179deg, #8fb6ff 0%, #ffffff 100%);
			width: 646rpx;
			padding: 78rpx 20rpx;
		}

		.blue-box {
			width: 686rpx;
			height: 120rpx;
			background: #4082fd;
			border-radius: 20rpx;
			padding: 0 56rpx;
		}

		.blue-line {
			width: 686rpx;
			height: 32rpx;
			background: #4082fd;
			border-radius: 16rpx;
			margin-top: 42rpx;
		}
	}

	.container-box1 {
		padding: 30rpx 32rpx 0;
		background-color: #4082fd;
		min-height: 100%;

		.detail-box {
			width: 686rpx;
			background-color: #ffffff;
			padding-top: 40rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			border-radius: 50rpx 50rpx 0 0;

			.line-img {
				width: 686rpx;
				height: 50rpx;
				margin: 30rpx 0;
			}

			.f-item {
				width: 82rpx;
				height: 32rpx;
				background: #4082ff;
				border-radius: 18rpx;
				font-size: 24rpx;
				line-height: 32rpx;
				color: #ffffff;
				text-align: center;
			}

			.kefu-box {
				padding: 30rpx;
				width: 100%;

				.contact-btn {
					font-size: 36rpx;
					color: #333333;
					font-weight: 600;
					width: 600rpx;
					text-align: left;
					background-color: #ffffff;

					&::after {
						border: none;
					}
				}
			}
		}
	}

	.look-btn {
		width: 180rpx;
		height: 52rpx;
		background: #ffffff;
		border-radius: 66rpx;
		margin-bottom: 50rpx;
		font-size: 24rpx;
		color: #4082fd;
		margin: 40rpx;
	}

	.look-btn1 {
		width: 180rpx;
		height: 52rpx;
		background: #4082fd;
		border-radius: 66rpx;
		margin-bottom: 50rpx;
		font-size: 24rpx;
		color: #ffffff;
		margin: 40rpx 40rpx 0;
	}

	.ml30 {
		margin-left: 30rpx;
	}
}
</style>
